<template>
  <view class="mt-title">
    <view class="mt-title-left">
      <view class="title-block"></view>
      <slot name="title">
        <text class="title-text">{{ title }}</text>
      </slot>
    </view>
    <view class="mt-title-right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});
</script>

<style lang="scss" scoped>
.mt-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    display: flex;
    align-items: center;
    .title-block {
      width: 4px;
      height: 16px;
      background: $mt-color-primary;
      margin-right: 8px;
    }
    .title-text {
      font-weight: bold;
      font-size: 28rpx;
      color: #1c213e;
    }
  }
}
</style>
